/**
 * Widgetproperty module
 */

import eventHelper from "../../../utils/EventHelper";
import React,{Component} from "react";
import { connect } from 'dva';
import classnames from 'classnames';
import { bindActionCreators } from 'redux';
import widgetsActions from '../../../actions/Editor/widgets';
import editorActions from '../../../actions/Editor/editor';
import tool from "../../../utils/tool";
import ColorPicker from "./ColorPicker";
import TextProperty from "./TextProperty";
import consts from "../../../consts/consts";
import GraphProperty from "./GraphProperty";
import storage from "../../../utils/storage";
import CommonProperty from "./CommonProperty";
//var dataProvider = require("../provider/dataProvider");
import Validator from "../../../utils/validator/Validator";
//var historyProvider = require("../provider/historyProvider");
//var WidgetPropertyCommand = require("../command/WidgetPropertyCommand");

class WidgetProperty extends Component{
    mixins: [CommonProperty]
    constructor(props) {
        super(props);
        this.state = {
            updateTimeline: false,
        };
    }
    getInitialProps(){
        return {
            root: {},
            widget: {}
        }
    }
    componentWillMount(){
        const {widget} = this.props;

        this.storeData = $.extend(true, {}, widget);

        this.custom = 1;
        this.buttonLabel = "";
        this.property_src = "";
        this.showAutoPlay = false;
        this.isVectorWidget = true;
        this.widget_type = widget.type;
        this.scale = widget.scale || 1;
        if (this.widget_type == consts.WIDGET_TYPE.THREED){
            this.initThreedSelectMaterials();
        }

        this.editedMapping = {
            opacity: "opacityEdited"
        };

        this.CONST = {
            PAPER_MAX_WIDTH: 1000,
            PAPER_WIDTH: window.is.CONST.editor_width
        };

        this.defaultScaleX = this.CONST.PAPER_MAX_WIDTH * widget.width / this.CONST.PAPER_WIDTH;
        this.defaultScaleY = this.CONST.PAPER_MAX_WIDTH * widget.height / this.CONST.PAPER_WIDTH;
    }
    initThreedSelectMaterials(){
        const {widget} = this.props;

        if (widget.u3d_fbx_name && widget.u3d_materials && !widget.select_material){
            var params =null,select_material={};
            for (var i=0 ;i<widget.u3d_materials.length;i++){
                select_material[$scope.widget.u3d_materials[i][0]] = widget.u3d_materials[i][1][0];
            }
            params = {
                select_material: select_material
            };
        }
    }
    resetProperty(){
        const {widget} = this.props;
        this.custom = 1;
        this.isVectorWidget = true;

        switch (widget.type){
            case consts.WIDGET_TYPE.PICTURE:
                this.buttonLabel = $._('Picture');
                this.isVectorWidget = false;
                break;
            case consts.WIDGET_TYPE.VIDEO:
                this.buttonLabel = $._('Video');
                break;
            case consts.WIDGET_TYPE.MUSIC:
                this.buttonLabel = $._("Music");
                break;
            case consts.WIDGET_TYPE.ALBUM:
                this.buttonLabel = $._('Picture');
                break;
            case consts.WIDGET_TYPE.THREED:
                this.buttonLabel = $._('3D Model');
                break;
            case consts.WIDGET_TYPE.TEXT:
                this.custom = 0;
                this.property_src = storage.data.CONST.templates.elements.text_property;
                break;
            case consts.WIDGET_TYPE.GRAPH:
            case consts.WIDGET_TYPE.LINE:
            case consts.WIDGET_TYPE.REDBAG:
                this.custom = 0;
                break;
            default:
                this.custom = widget.custom || 0;
                this.buttonLabel = $._('Picture');
                this.widget_type = consts.WIDGET_TYPE.STANDARD;
                this.isVectorWidget = false;
                break;
        }
    }
    checkInputVaild(type, value, needAlert){
        let validators = [];
        let validator = Validator();

        // 大小、位置、深度加入小数校验
        let nonDecimalTypes = ["offset_x", "offset_y", "offset_z", "width", "height"];
        if ($.inArray(type, nonDecimalTypes) != -1){
            validators.push({ validator: "nonDecimal" });
        }
        validators.push({ validator: type });

        validator.addRule(value, validators);

        let errors = validator.execute();
        errors && needAlert && (alert(errors));

        return !errors;
    }
    handleOnPropertySave(e){
        const {widget: data} = this.props;
        let input = $(e.target || e.srcElement);
        let type = input.attr("name"), val = input.val();
        let propertyEdited = this.editedMapping[type];
        let storeData = tool.rebuildWidgetData(data, type, val);

        if (propertyEdited){
            storeData[propertyEdited] = true;
        }
        storeData.opacity = parseFloat(storeData.opacity);
        console.log("widget save");
//        root.updateLocaleWidget(storeData);
    }
    handleOnInputBlur(e,type){
        const {widget,setState} = this.props;
        let data = widget;
        let oldWidget = $.extend(true, {}, data);
        let input = $(e.target || e.srcElement);
        let scaleTypes = ["width", "height"];
        let mapping = {
            width: "scaleX",
            height: "scaleY"
        }, default_mapping = {
            width: "defaultScaleX",
            height: "defaultScaleY"
        };
        if (input && input.length){
            let val = input.val();

            let numberTypes = ["width", "height", "radius", "offset_x", "offset_y", "offset_z", "rotate_x", "rotate_y", "rotate_z", "opacity"];
            if (val && $.inArray(type, numberTypes) !== -1){
                val = parseFloat(val);
                if (type == 'radius'){
                    val = val > 0 ? val || 0 : 0;
                }
            }

            //　可以为空
            let nullTypes = ["tip_text"];
            if ($.inArray(type, nullTypes) === -1){
    　          val = val == "" ? 0 : val;
            }

            let propertyTypes = ["tip_text", "radius"];
            if ($.inArray(type, propertyTypes) !== -1){
                data.propertyChanged = true;
            }

            let sizeTypes = ["width", "height"];
            if ($.inArray(type, sizeTypes) !== -1){
                data.sizeChanged = true;
            }

            if (this.checkInputVaild(type, val, true)){
                data = tool.rebuildWidgetData(data, type, val);
                data.radius = data.radius == undefined ? 0 : data.radius;
                data.scale = data.scale || 1;
                data.is_saved = true;

                if ($.inArray(type, scaleTypes) != -1){
                    let defaultScale = this[default_mapping[type]] || 1;
                    let scale = this.CONST.PAPER_MAX_WIDTH * val / this.CONST.PAPER_WIDTH;
                    data[mapping[type]] = scale / defaultScale;
                }

                if (!tool.isEmptyObject(data)){
                    // 处理锁定状态下的宽高
                    data.width = parseInt(data.width);
                    data.height = parseInt(data.height);
                    this.updateWidget(data);
                    // 更新有路径动效的路径点
                    if (this.state.updateTimeline) this.updateWidgetTimelines(data);
                }

                let newWidget = $.extend(true, {}, data);
//                historyProvider.execute(new WidgetPropertyCommand(storage.data.page, oldWidget, newWidget, root, dataProvider));
            } else {
                setState({selectedWidget: this.storeData})
                eventHelper.trigger(consts.EVENTS.THREED_WIDGET_PROPERTY_CHANGED, this.storeData);
            }
        }
    }
    updateWidgetTimelines(data){
//          const timelines = this.state.timelines[widget.id] || [];
//          for (let an of this.values(timelines)){
//              if (consts.WIDGET_HAS_PATH_ANIMATION_TYPE.includes(an.an_types[0].an_type)){
//                const p = an.an_types[0].points;
//                const _x = widget.offset_x - p[0].x,
//                    _y = widget.offset_y - p[0].y;
//                  p.forEach((pp) => {
//                      pp.x += _x;
//                      pp.y += _y;
//                  });
//                  var selectedTimeline = storage.data.selectedTimeline;
//                  if (selectedTimeline && an.id == selectedTimeline.id){
//                      storage.data.selectedTimeline = an;
//                      this.setState({
//                          selectedTimeline: an
//                      });
//                  }
//                  dataProvider.updateTimelineAnimation(widget.id, an);
//              }
//          }
        console.log('更新有路径动效的元件位置');
    }
    handleOnPropertyChange(type, e){
        const {widget,setState,updateWidget} = this.props;
        let data = widget;
        let input = $(e.target), val = input.val();

        let ratio = parseFloat(data.width / data.height);

        data = tool.rebuildWidgetData(data, type, val);

        // 锁定状态下处理宽高
        if (data.resize_lock == 1){
            if (type == 'width'){
                data.height = parseFloat(data.width / ratio) || 1;
            } else if(type == 'height') {
                data.width = parseInt(data.height * ratio).toFixed(0) || 1;
            }
        }

        // onchange时保存合法的属性，以便输入非法时恢复合法数据
        if (this.checkInputVaild(type, val)){
            this.storeData = $.extend(true, {}, data);
        }
        // tip_text超过12不能输入
        if (type == 'tip_text'){
            if (val.length >= 12){
                val = val.slice(0, 12);
                data.tip_text = val;
            }
        }
        //label超过36不能输入
        if (type == 'label'){
           if (val.length >= 36){
                val = val.slice(0, 36);
                data.label = val;
            }
        }
        setState({selectedWidget: data})
        updateWidget(data);
        // 是否需更新widget下的路径动效标记
        this.setState({
            updateTimeline: (type == 'offset_x' || type == 'offset_y')
        });
    }
    handleOnChangePictureDialog(){
//        var root = this.props.root;
//        root.openDialog(consts.DIALOG_TYPE.UPLOAD_PICTURE);
        console.log('open dialog')
    }
    handleOnStatusChange(type,e,param){
        const {widget,updateWidget,setState} = this.props;
//        let eventObj = tool.getEventObjByArray([].slice.call(arguments));
//        if (!eventObj) return;
        let element = $(e.target);
        let params = null;
        console.log(widget)
        if ("auto_play" === type){
            params = {
                auto_play: !widget.auto_play
            };
        } else if("repeat" === type) {
            params = {
                repeat: !widget.repeat
            };
        } else if("single_page" === type) {
            params = {
                single_page: !widget.single_page
            };
        } else if("icon" === type) {
            widget.propertyChanged = true;
            params = {
                icon: !widget.icon
            };
        } else if("select_animation" === type) {
            params = {
               select_animation: param
            };
        } else if("select_material"=== type) {
            var val = element.val();
            var select_material = widget.select_material ? widget.select_material : {};
            select_material[param] = val;
            params = {
               select_material: select_material
            };
        } else if("looptype" === type) {
            var looptype = !widget.looptype ? 1 : 0;
            params = {
                looptype: looptype
            };
        } else if("custom" === type) {
            params = {
                custom : parseInt(param),
                pictureChanged: !!param,
                propertyChanged: !!param
            };
        } else if("pause" === type) {
            params = {
                pause : !widget.pause
            };
        } else if("tem_widget_change" == type) {
            params = {
                tem_widget_change: !widget.tem_widget_change ? 1 : 0
            };
        }

        $.extend(widget, params);
        // 自动保存修改为立即更新-0506

        updateWidget(widget);
        setState({selectedWidget: widget});
    }
    handleOnOpenUploadDialog(e){
        let className = "custom-image-btn";
        let element = $(e.target || e.srcElement);
        element = element.hasClass(className) ? element : element.parents("." + className);

        let type = element.attr("data-type");
        if (type == consts.WIDGET_TYPE.VIDEO){
            storage.data.is_edit_video = true;
        } else if(type == consts.WIDGET_TYPE.MUSIC) {
            storage.data.is_edit_music = true;
        } else if(type == consts.WIDGET_TYPE.THREED) {
            storage.data.is_edit_u3d = true;
        } else if(type == consts.WIDGET_TYPE.ALBUM){
            storage.data.is_edit_album = true;
            console.log('open dialog');
//            root.openDialog(type,false,this.props.widget);
            return;
        }
//        root.openDialog(type);
        console.log('open dialog');
    }
    updateWidget(data){
//        var root = this.props.root;
//        var page = storage.data.page;
//
//        data.radius = data.radius >
//            Math.min(data.width, data.height) / 2 ?
//                Math.min(data.width, data.height) / 2 : data.radius;
//        data.is_saved = true;
//        eventHelper.trigger(consts.EVENTS.THREED_WIDGET_PROPERTY_CHANGED, data);
//        dataProvider.updateWidget(data, function (){
//            // 更新state,不重新拉取数据
//            var widgets = root.state.widgets;
//            for (var i in widgets){
//                if (widgets[i].id == data.id){
//                    widgets[i] = data;
//                }
//            }
//            root.setState({
//                widgets: widgets,
//                selectedWidget: data
//            });
//        });
    }
    handleOnResizeLock(){
       const {widget,updateWidget,setState} = this.props;
       let param = {
           widget_id: widget.widget_id,
           id: widget.id,
           resize_lock: Number(!widget.resize_lock),
       }
       setState(param);
       updateWidget(param);
    }
    render(){
        this.resetProperty();
        const {widget,updateWidget,setState} = this.props;
        let light = widget.light ? (widget.light.intensity != undefined ? widget.light.intensity : 0.35) : 0.35;

        let lan = storage.data.lan;
        widget.opacity = parseFloat(widget.opacity);
        // 反转opcity显示
        let opacityShow = ((widget.opacity - 1) == 0 ? 0 : -(widget.opacity - 1).toFixed(2));
        opacityShow = (opacityShow * 100).toFixed(0);

        let resizeLockNode = "";
        if (widget.resize_lock != -1){
            resizeLockNode = <div className={widget.resize_lock ? "resize-lock" : "resize-unlock"} onClick={() => this.handleOnResizeLock()}></div>
        }

        var sizeNode = "";
        if (widget.type != consts.WIDGET_TYPE.THREED && widget.type != consts.WIDGET_TYPE.MUSIC){
            sizeNode =
                <div className="rowlist">
                    <label>{$._("Size")}</label>
                    <input name="width" onChange={(e) => this.handleOnPropertyChange("width",e)} onBlur={(e) => this.handleOnInputBlur( "width",e)} data-number type="number" value={widget.width} className='form-control position-offset' />
                    <input name="height" onChange={(e) => this.handleOnPropertyChange("height",e)} onBlur={(e) => this.handleOnInputBlur("height",e)} data-number type="number" value={widget.height} className='form-control' />
                    <span className="position position-w">Width</span>
                    <span className="position position-h">Height</span>
                    {resizeLockNode}
                </div>
        }

        let opacityNode = "";
        if　(widget.type != consts.WIDGET_TYPE.THREED){
            opacityNode =
                <div className="rowlist opca">
                    <label className="pull-left">{$._('Opacity')}</label>
                    <input name="opacity" type="range" min="0" max="1" step="0.01" onBlur={(e) => this.handleOnInputBlur("opacity",e)} onChange={(e) => this.handleOnPropertyChange("opacity",e)} value={widget.opacity} />
                    <div className="opcadiv">{ opacityShow }%</div>
                </div>
        }

        let standardNode = "";
        if (consts.STANDARD_BUTTON_TYPES.indexOf(widget.type) > -1 && widget.type != consts.WIDGET_TYPE.ALBUM || widget.type == consts.WIDGET_TYPE.FORM){
            standardNode =
                <div className="standard">
                    <div className={"info-item " + (this.custom == 0 ? "activebtn" : (this.custom == 1 ? "noactivebtn" : ""))} onClick={(e) => this.handleOnStatusChange( "custom", e, "0")} name='custom'>
                        <span>{$._('Default style')}</span>
                    </div>
                    <div className={"info-item " + (this.custom == 0 ? "noactivebtn" : (this.custom == 1 ? "activebtn" : ""))} onClick={(e) => this.handleOnStatusChange( "custom", e, "1")} name='custom'>
                        <span>{$._("Custom")}</span>
                    </div>
                </div>
        }

        let metaNode = "";
        if (this.custom == 1){
            if (widget.type == consts.WIDGET_TYPE.MUSIC){
                var playMusicNode = "";
//                if (storage.data.paly_music){
//                    playMusicNode = <div className={storage.data.play_music ? "pausepreview" : ""}></div>
//                } else {
//                    playMusicNode = <div className={storage.data.play_music ? "" : "pausedpreview"}></div>
//                }
                if (widget.pause){
                    playMusicNode = <div className={"info-item " + (widget.pause ? "pausepreview" : "")} name='pause' ></div>
                } else {
                    playMusicNode = <div className={"info-item " + (widget.pause ? "" : "pausedpreview")} name='pause' ></div>
                }
                var sidebarNode = "";
                sidebarNode =
                    <div className="sidebar-preview info-item" name='pause' onClick={(e) => this.handleOnStatusChange( "pause",e)}>
                        {playMusicNode}
                        <div></div>
                    </div>
            }

            var replaceNode = "";
            if (widget.type == consts.WIDGET_TYPE.VIDEO ||
                widget.type == consts.WIDGET_TYPE.MUSIC ||
                widget.type == consts.WIDGET_TYPE.THREED){
                replaceNode =
                    <div data-type={widget.type} onClick={(e) => this.handleOnOpenUploadDialog(e)} type="button" tabIndex="-1" className="custom-image-btn">
                        <span className='button-item'>
                            <span>{$._('Replace')}</span>
                            <span>{this.buttonLabel}</span>
                        </span>
                    </div>

            }

            var urlNode = "";
            if (widget.type == consts.WIDGET_TYPE.PICTURE){
                urlNode =
                    <div onClick={this.handleOnChangePictureDialog} type="button" tabIndex="-1" className="custom-image-btn-img" style={{background: "url(" + widget.url + ") no-repeat center", backgroundSize: "cover"}}>
                    </div>
            }

            var customNode = "";
            var uploadedStyle = {};
            if(widget.custom && widget.url){
                var uploadedStyle = {//上传后的样式
                    background: "url(" + widget.url + ") no-repeat center",
                    backgroundSize: "cover"
                };
            }
            if ((consts.STANDARD_BUTTON_TYPES.indexOf(widget.type)>-1 || widget.type == consts.WIDGET_TYPE.FORM) && widget.custom == 1){
                customNode =
                    <div type="button" tabIndex="-1" className="custom-image-btn-img" onClick={this.handleOnChangePictureDialog} style={uploadedStyle}>
                        <span className={widget.url ? "uploadedStyle": ""}>{$._("Upload custom image")}</span>
                    </div>
            }

            var editAlbumNode = "";
            if (widget.type == consts.WIDGET_TYPE.ALBUM){
                editAlbumNode =
                    <div type="button" tabIndex="-1" className="custom-image-btn"　data-type={widget.type} onClick={(e) => this.handleOnOpenUploadDialog(e)}>
                        <span className="button-item">{$._("Edit Album")}</span>
                    </div>
            }

            var showScaleNode = "";
            if (widget.type == consts.WIDGET_TYPE.THREED){
                showScaleNode =
                    <div>
                        <div className="rowlist Is3D">
                            <label className="label-scale">{$._("Model Size")}</label>
                            <input name="scale" data-number type="number" onChange={(e) => this.handleOnPropertyChange("scale",e)} onBlur={(e) => this.handleOnInputBlur("scale",e)} value={widget.scale} className="scale form-control" min='0'/>
                        </div>
                        <div className="info-item1 Is3D">
                            <label className="label-repeat info-item-label">{$._('Loop playBack')}</label>
                            <div className={"info-item info-item-icon " + (widget.looptype ? "icon-uniF52F" : "icon-uniF471")} name='looptype' onClick={(e) => this.handleOnStatusChange("looptype",e)}></div>
                        </div>
                    </div>
            }

            metaNode =
                <div className="widget-meta-custom">
                    {sidebarNode}
                    {replaceNode}
                    {urlNode}
                    {customNode}
                    {editAlbumNode}
                    {showScaleNode}
                </div>
        }

        let widgetMetaDefaultNode = "";
        if (this.custom == 0 && !this.isVectorWidget){
            widgetMetaDefaultNode =
                <div className="widget-meta-default">
                    <div className="rowlist property_text">
                        <label>{$._("Text")}</label>
                        <input type="text" name='tip_text' value={widget.tip_text} className="form-control" onChange={(e) => this.handleOnPropertyChange("tip_text",e)} onBlur={(e) => this.handleOnInputBlur("tip_text",e)}/>
                    </div>
                    <div className="rowlist">
                        <label>{$._('Chamfer')}</label>
                        <input name='radius' type="text" value={widget.radius} className="property-radius form-control" data-graph-radius min="0" onChange={(e) => this.handleOnPropertyChange("radius",e)} onBlur={(e) => this.handleOnInputBlur("radius",e)}/>
                    </div>
                    <div className="rowlist istubiao info-item" name='icon'>
                        <label className="pull-left">{$._("Icon")}</label>
                        <div className={"repeat info-item-icon " + (widget.icon ? "icon-uniF52F" : "icon-uniF471")} onClick={(e) => this.handleOnStatusChange("icon",e)}></div>
                    </div>
                    <ColorPicker widget={widget} />
                </div>
        }

        let vectorPropertyNode = "";
        switch (parseInt(widget.type)){
            case consts.WIDGET_TYPE.TEXT:
                vectorPropertyNode = <TextProperty widget={widget} parent={this} updateWidget={updateWidget} setState={setState}/>
                break;
            case consts.WIDGET_TYPE.GRAPH:
                vectorPropertyNode = <GraphProperty widget={widget} parent={this} updateWidget={updateWidget} setState={setState} />
                break;
        }

        let musicInnerNode = "";
        let colorPickerNode = "";
        if (widget.type == consts.WIDGET_TYPE.MUSIC){
            colorPickerNode = <ColorPicker widget={widget} />
            musicInnerNode =
                <div className="rowlist">
                    {colorPickerNode}
                    <div name="auto_play" onClick={(e) => this.handleOnStatusChange( "auto_play",e)} className="info-item info-item1">
                        <label className="label-auto_play info-item-label">{$._('Auto Play')}</label>
                        <div className={"auto_play info-item-icon " + (widget.auto_play ? "icon-uniF52F" : "icon-uniF471")}></div>
                    </div>
                    <div name="repeat" onClick={(e) => this.handleOnStatusChange( "repeat",e)} className="info-item info-item1">
                        <label className="label-repeat info-item-label">{$._('Loop playBack')}</label>
                        <div className={"repeat info-item-icon " + (widget.repeat ? "icon-uniF52F" : "icon-uniF471")}></div>
                    </div>
                    <div name="single_page" onClick={(e) => this.handleOnStatusChange( "single_page",e)} className="info-item info-item1">
                        <label className="label-single_page info-item-label">{$._("SinglePage Play")}</label>
                        <div className={"single_page info-item-icon " + (widget.single_page ? "icon-uniF52F" : "icon-uniF471")}></div>
                    </div>
                </div>
        }

        let threedAndVideoInnerNode = "";
        if (widget.type == consts.WIDGET_TYPE.VIDEO){
            threedAndVideoInnerNode =
                <div className="rowlist">
                    <div name="auto_play" onClick={(e) => this.handleOnStatusChange( "auto_play",e)} className="info-item info-item1" style={{display: widget.alpha_md5 ? "none" : "block"}}>
                        <label className="label-auto_play info-item-label">{$._('Auto Play')}</label>
                        <div className={"auto_play info-item-icon " + (widget.auto_play ? "icon-uniF52F" : "icon-uniF471")}></div>
                    </div>
                    <div name="repeat" onClick={(e) => this.handleOnStatusChange("repeat",e)} className="info-item info-item1">
                        <label className="label-repeat info-item-label">{$._('Loop playBack')}</label>
                        <div className={"repeat info-item-icon " + (widget.repeat ? "icon-uniF52F" : "icon-uniF471")}></div>
                    </div>
                </div>
        }

        let albumInnerNode = "";
        if (widget.type == consts.WIDGET_TYPE.ALBUM){
            albumInnerNode =
                <div className="rowlist">
                    <div className="info-item info-item1" name="auto_play" onClick={(e) => this.handleOnStatusChange("auto_play",e)}>
                        <label className="label-auto_play info-item-label">{$._('Auto Play')}</label>
                        <div className={"auto_play info-item-icon " + (widget.auto_play ? "icon-uniF52F" : "icon-uniF471")}></div>
                    </div>
                    <div className="info-item info-item1" name="repeat" onClick={(e) => this.handleOnStatusChange("repeat",e)}>
                        <label className="label-repeat info-item-label">{$._('Loop playBack')}</label>
                        <div className={"repeat info-item-icon " + (widget.repeat ? "icon-uniF52F" : "icon-uniF471")}></div>
                    </div>
                </div>
        }

        let threedInnerNode = "";
        if (widget.type == consts.WIDGET_TYPE.THREED){
            var threed_animationNode = "";
            if(widget.u3d_animations){
                threed_animationNode =
                    <div>
                        {
                            widget.u3d_animations.map(function(u3d_animation,pos){
                                return(
                                    <div className="animation_default_list info-item" onClick={(e) => this.handleOnStatusChange( "select_animation", pos, e)} name="select_animation" key={pos}>
                                        <div className={"info-item-icon " + (widget.select_animation == pos ? "icon-unxe71f" : "icon-uniF471")} ></div>
                                        <span className='animation_default_name'>{u3d_animation[0]}</span>
                                        <span className='pull-right'>
                                            <span>{u3d_animation[1][0]}</span>
                                            <span>-</span>
                                            <span>{u3d_animation[1][1]}</span>
                                            <span>f</span>
                                        </span>
                                    </div>
                                )
                            }.bind(this))
                        }
                    </div>
            }
            var threed_materialsNode= "";
            if(widget.u3d_materials){
                threed_materialsNode =
                    <div>
                        {
                            widget.u3d_materials.map(function(u3d_material){
                                return(
                                    <div className='Texture_default_list'>
                                        <img src="/static/idealsee/images/new_editor/editor/Bitmap.png" width='20'/>
                                        <span>{u3d_material[0]}</span>
                                        <select name='select_material' onChange={(e) => this.handleOnStatusChange("select_material", e, u3d_material[0])} className='info-item' value={widget.select_material[u3d_material[0]]}>
                                            {
                                                u3d_material[1].map(function(u3d_name){
                                                    return(
                                                        <option value={u3d_name}>{u3d_name}</option>
                                                    )
                                                 }.bind(this))
                                            }
                                        </select>
                                    </div>
                                )
                            }.bind(this))
                        }
                    </div>
            }
            var threed_new_propertyNode = "";
            var threed_defaultAnimationNode = '';
            threed_defaultAnimationNode =
                 <div>
                    <div className="threed_info">{$._('Modle load action settings')}</div>
                    <div className="threed_3d">
                        <div className="threed_animation_default">
                            <div className="animation_default_list info-item" name="select_animation" onClick={(e) => this.handleOnStatusChange("select_animation",e, -2)}>
                                <div className={"info-item info-item-icon " + (widget.select_animation==-2 ? "icon-unxe71f" : "icon-uniF471")}　></div>
                                <span className='animation_default_name'>{$._('No animation')}</span>
                            </div>
                            <div className="animation_default_list info-item" name="select_animation" onClick={(e) => this.handleOnStatusChange("select_animation",e,-1)}>
                                <div className={"info-item-icon " + (widget.select_animation==-1 ? "icon-unxe71f" : "icon-uniF471")}></div>
                                <span className='animation_default_name'>{$._('All animation')}</span>
                            </div>
                            {threed_animationNode}
                        </div>
                    </div>
                </div>
            if(widget.u3d_fbx_name){
                threed_new_propertyNode =
                    <div className='rowlist threed_property'>
                        <div>
                            <div className="threed_info">{$._('Model load textures settings')}</div>
                            <div className='threed_3d'>
                                <div className="threed_Texture_default">
                                    {threed_materialsNode}
                                </div>
                                <div className='no_default_sd' style={{display: !widget.u3d_materials ? "block" : "none"}}>{$._("No textures in the model")}</div>
                            </div>
                        </div>
                    </div>
            }
            threedInnerNode =
                <div>
                    <div className="isLight">
                        <label>{$._('Light intensity')}</label>
                        <input type="range" name='light' min='0' max='1.00' step="0.01" value={ light } onChange={(e) => this.handleOnPropertyChange("light", e)} onBlur={(e) => this.handleOnInputBlur("light",e)}/>
                        <div className="light_div">{ light }</div>
                    </div>
                    <div className='rowlist' style={{padding:'20px 10px 0',borderTop:'1px solid #dddddd',width:'256px',marginLeft:'-10px'}}>
                        {threed_defaultAnimationNode}
                        {threed_new_propertyNode}
                    </div>
                </div>
        }

        let widgetReplaceNode = "";//编辑模板AR使用字段
        if (widget.tem_widget_change_dis){
            widgetReplaceNode = <div className='rowlist left-padding'>
                                    <div name="tem_widget_change"  className="info-item info-item1"　onClick={(e) => this.handleOnStatusChange("tem_widget_change",e)}>
                                        <label className="label-replace info-item-label">{$._("can replace")}</label>
                                        <div className={"info-item-icon " + (widget.tem_widget_change ? "icon-uniF52F" : "icon-uniF471")}></div>
                                    </div>
                                </div>
        }
        return (
            <form noValidate className="property-container property" name="form.name">
                <div className="widget-property">
                    <div className="standard-info">
                        <div className="rowlist">
                            <div className="widget-meta">
                                <label>{$._("Name")}</label>
                                <input type="text" name="label" onChange={(e) => this.handleOnPropertyChange("label",e)} onBlur={(e) => this.handleOnInputBlur("label",e)} value={widget.label} className="widget-title form-control" />
                                {standardNode}
                                {metaNode}
                            </div>
                        </div>
                        {widgetReplaceNode}
                        {widgetMetaDefaultNode}
                    </div>
                    <div className="vector-property">
                        {vectorPropertyNode}
                    </div>
                    <div className="other-info">
                        {musicInnerNode}
                        {threedAndVideoInnerNode}
                        {albumInnerNode}
                        {threedInnerNode}
                    </div>
                    <div className={"position-info " + (lan == 'ja_JP' ? "position-info-ja" : "")} >
                        <div className="rowlist">
                            <label>{$._("Position")}</label>
                            <input name="offset_x" onChange={(e) => this.handleOnPropertyChange("offset_x",e)} onBlur={(e) => this.handleOnInputBlur("offset_x",e)} data-number type="number" value={widget.offset_x} className='form-control' />
                            <input name="offset_y" onChange={(e) => this.handleOnPropertyChange("offset_y",e)} onBlur={(e) => this.handleOnInputBlur("offset_y",e)} data-number type="number" value={widget.offset_y} className='form-control' style={{marginRight:"0px"}} />
                            <span className="position position-x">x</span>
                            <span className="position position-y">y</span>
                        </div>
                        <div className="rowlist">
                            <label>{$._('Turn')}</label>
                            <input name="rotate_x" onChange={(e) => this.handleOnPropertyChange("rotate_x",e)} onBlur={(e) => this.handleOnInputBlur("rotate_x",e)} data-number type="number" value={widget.rotate_x} className='form-control' />
                            <input name="rotate_y" onChange={(e) => this.handleOnPropertyChange("rotate_y", e)} onBlur={(e) => this.handleOnInputBlur("rotate_y",e)} data-number type="number" value={widget.rotate_y} className='form-control' />
                            <span className="position position-x">x</span>
                            <span className="position position-y">y</span>
                        </div>
                        {sizeNode}
                        <div className="shendu">
                            <span className="position position-z">{$._("Offset_z")}</span>
                            <input name="offset_z" onChange={(e) => this.handleOnPropertyChange("offset_z", e)} onBlur={(e) => this.handleOnInputBlur("offset_z",e)} data-number type="number" value={widget.offset_z} className='form-control' min='-2000' max='2000'/>
                        </div>
                        <div className="xuanzhuan">
                            <span className="position position-z">{$._("Rotate")}</span>
                            <input name="rotate_z" onChange={(e) => this.handleOnPropertyChange("rotate_z", e)} onBlur={(e) => this.handleOnInputBlur("rotate_z",e)} data-number type="number" value={widget.rotate_z} className='form-control' />
                        </div>
                        {opacityNode}
                    </div>
                </div>
            </form>
        )
    }
}

const mapStateToProps = ({ editor, widgets}) => {
  const pageId = editor.selectedPageId;
  return {
      editor,
      widgets: widgets.filter(w => w.page_id === pageId),
  };
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({...widgetsActions,...editorActions}, dispatch);
};


export default connect(mapStateToProps, mapDispatchToProps)(WidgetProperty);
